/**
 *
 * Copyright 2016-present scrm
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
 import React from 'react';
 import {
   StyleSheet,
   WebView,
   BackHandler,
   Dimensions,
   Text,
   TextInput,
   Image,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
   Modal,
   ScrollView,
   Platform
 } from 'react-native';

 import Button from '../../components/Button';

 import BackgroundImage from '../../config/BackgroundImage';
 import colors from '../../config/colors';
 const cardBgImage = require("../../img/my_card.png");

 class VisitingCard extends React.Component {
   static navigationOptions = ({ navigation }) => ({
     title: "我的名片"
   });

   constructor(props) {
     super(props);
   }

   renderWeChatQR () {
     return (
       <View
       style={styles.qrWrapperStyle}>
          <Text
          style={styles.qrTextPlaceholder}>+ 上传微信二维码</Text>
       </View>
     )
   };

   renderTextInput = (inputId, placeholder, style, multiline) => {
     return (
        <View
        style={[styles.textinputWrapperStyle, style && style]}>
          <TextInput
          multiline={multiline}
          underlineColorAndroid='transparent'
          placeholderTextColor={colors.grey6}
          style={styles.cardTextInput}
          placeholder={placeholder}
          />
        </View>
     )
   };

   renderTextArea = (inputId, placeholder) => {
     return (
       <View
       style={[styles.textinputWrapperStyle, styles.textAreaStyle]}>
        <TextInput
        multiline={true}
        underlineColorAndroid='transparent'
        placeholderTextColor={colors.grey6}
        style={styles.cardTextAreaInput}
        placeholder={placeholder}
        />
       </View>
     )
   };

   render() {
     return (
       <View style={styles.container}>
         {/*导航条*/}
         <ScrollView>
            <BackgroundImage
            resizeMode="cover"
            style={styles.imageStyle}
            source={cardBgImage}
            >
              {this.renderWeChatQR()}
              {this.renderTextInput('name', '请输入姓名')}
              {this.renderTextInput('phone', '请输入手机')}
              {this.renderTextArea('summary', '个人介绍')}
            </BackgroundImage>
            <View
            style={styles.saveBtnWrapperStyle}>
              <Button
              style={styles.saveButtonStyle}
              text='保存'/>
            </View>
         </ScrollView>
       </View>
     )
   }
 }

 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
     flex: 1,
     alignItems: 'center',
   },
   imageStyle: {
     width: 340,
     minHeight: 380,
     marginTop: 20,
     borderWidth: 1,
     paddingBottom: 15,
     borderColor: colors.blue1,
     borderRadius: 2,
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center'
   },
   qrWrapperStyle: {
     width: 150,
     height: 150,
     backgroundColor: colors.blue2,
     opacity: 0.8,
     marginTop: 10,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center'
   },
   qrTextWrapperStyle: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center'
   },
   qrTextPlaceholder: {
     color: 'white',
     fontSize: 15,
     fontWeight: 'bold'
   },
   textinputWrapperStyle: {
      borderColor: colors.blue1,
      borderBottomWidth: 1,
      width: 250,
      ...Platform.select({
        ios: {
          marginTop: 20,
        },
        android: {
          marginTop: 10,
        }
      })
   },
   textAreaStyle: {
     borderWidth: 1,
     padding: 6,
     marginTop: 36
   },
   cardTextAreaInput: {
     minHeight: 100,
     textAlign: 'center'
   },
   cardTextInput: {
     flex: 1,
     borderBottomWidth: 0,
     textAlign: 'center',
     ...Platform.select({
       ios: {
         marginBottom: 6
       },
       android: {
         padding: 0,
         margin: 0
       }
     })
   },
   saveBtnWrapperStyle: {
     flexDirection: 'column',
     flex: 1,
     alignItems: 'center'
   },
   saveButtonStyle: {
     paddingTop: 10,
     paddingBottom: 10,
     marginTop: 20,
     textAlign: 'center',
     backgroundColor: colors.blue3,
     borderRadius: 4,
     color: 'white',
     width: 100
   }
 });

 export default VisitingCard;
